<template>
  <div>
    <div class="ball-icon" @click="openBall()" v-if="ballShow" :class="opened ? 'open':'close'">
      <img src="//resource.youyizhuan.cn/Resource/app/image/home/floating_tips.png">
    </div>
    <transition name="fade">
      <div class="message-box" v-if="opened">
          <button class="close-btn" @click="closeBall()">关闭</button>
        <transition-group name="list" tag="ul">
          <li :key="k + 1" v-for="(v, k) in msgList" @click="JumpUrl(v.btn_url, v.id)">
            <div class="icon">
              <img v-if="v.is_read == 1" :src="v.icon">
              <img v-if="v.is_read == 0" src="//resource.youyizhuan.cn/Resource/app/image/home/msg_icon_1.png">
            </div>
            <p class="van-multi-ellipsis--l2">{{v.content}}</p>
            <button>{{v.btn_text}}</button>
          </li>
        </transition-group>
      </div>
    </transition>
    <div v-if="opened" class="mark"></div>
  </div>
</template>

<script>
  import { storage } from '@/util';
  export default {
    props: {
      ballData: {},
      ballShow: Boolean
    },
    components: {
      
    },
    
    data() {
      return {
        opened: false,
        msgList: [],
        // List: [{item: 1},{item: 1},{item: 1},{item: 1}],
        showIndex: 0,
      };
    },
    methods:{
      // fetch(arr) {
      //   // 如果消息被点击，就要不显示该条消息，如果全部被点过，展示球之前就要先判断该球内消息是否都被点过了
      //   // 无论已读未读，悬浮球显示的条件是是否有数据进来就要显示
      //   let isJumpArr = storage.get('ISJUMP_MSG_LIST');
      //   if (arr.length > 0 && isJumpArr) {
      //     for (var i = 0; i < isJumpArr.length; i++) {
      //       for (var j = 0; j < arr.length; j++) {
      //         if (arr[j].id == isJumpArr[i]) {
      //           arr.splice(j, 1)
      //         }
      //       }
      //     }
      //   }
      // },
      // autoOpen(arr) {
      //   let isReadArrId = storage.get('ISREAD_MSG_LIST');
      //   if (arr.length > 0 && isReadArrId) {
      //     for (var i = 0; i < isReadArrId.length; i++) {
      //       for (var j = 0; j < arr.length; j++) {
      //         if (arr[j].id != isReadArrId[i]) {
      //           return true
      //         }
      //       }
      //     }
      //   } else if (arr.length > 0 && !isReadArrId){
      //     return true
      //   }
      //   return false
      // },
      openBall() {
        this.opened = true;
        // // 从缓存读取已读的id列表
        // let isReadArrId = storage.get('ISREAD_MSG_LIST');
        // if (isReadArrId) {
        //   for (var i = 0; i < isReadArrId.length; i++) {
        //     for (var j = 0; j < this.ballData.length; j++) {
        //       if (isReadArrId[i] == this.ballData[j].id) {
        //         this.ballData[j].read = true;
        //       }
        //     }
        //   }
        // }
        // var isReadArr;
        // if (storage.get('ISREAD_MSG_LIST')) {
        //   isReadArr = storage.get('ISREAD_MSG_LIST');
        // } else {
        //   isReadArr = [];
        // }
        // // 展开后添加已读缓存
        // if (this.ballData.length > 3) {
        //   // 条数大于4条的时候
        //   for (let i = 0; i < 4; i++) {
        //     isReadArr.push(this.ballData[i].id);
        //     isReadArr = Array.from(new Set(isReadArr));
        //     this.$get('/tipsMsgStat',{type: 1, action: 1001, id: this.ballData[i].id})
        //   }
        //   storage.set('ISREAD_MSG_LIST', isReadArr);
        // } else if (this.ballData.length > 0 && this.ballData.length < 4) {
        //   // 条数小于4条的时候
        //   for (let i = 0; i < this.ballData.length; i++) {
        //     isReadArr.push(this.ballData[i].id);
        //     isReadArr = Array.from(new Set(isReadArr));
        //     this.$get('/tipsMsgStat',{type: 1, action: 1001, id: this.ballData[i].id})
        //   }
        //   storage.set('ISREAD_MSG_LIST', isReadArr);
        // }
        
        
        // 填充数据用
        // var addMsgTimer = setInterval(() => {
        //   this.addMsg();
        //   this.showIndex++;
        //   // console.log(this.showIndex >= 3)
        //   // console.log(this.showIndex >= this.ballData.length)
        //   if (this.showIndex >= this.ballData.length || this.showIndex >= 4) {
        //     clearInterval(addMsgTimer);
        //   }
        // },300)
      },
      addMsg() {
        this.msgList.push(this.ballData[this.showIndex]);
      },
      closeBall() {
        this.opened = false;
        this.msgList = [];
        this.showIndex = 0;
        // this.$parent.fetchBallData();
      },
      JumpUrl(url, id) {
        // let isJumpArr = storage.get('ISJUMP_MSG_LIST');
        // if (isJumpArr) {
        //   isJumpArr.push(id)
        //   isJumpArr = Array.from(new Set(isJumpArr));
        //   storage.set('ISJUMP_MSG_LIST', isJumpArr)
        // } else {
        //   isJumpArr = [];
        //   isJumpArr.push(id)
        //   isJumpArr = Array.from(new Set(isJumpArr));
        //   storage.set('ISJUMP_MSG_LIST', isJumpArr)
        // }
        setTimeout(() => {
          let local = window.location.href;
          if (local.search(url) > -1) {
            this.closeBall();
            // this.$parent.fetchBall();
          } else {
            this.$router.push(url)
          }
        }, 100)
      },
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/less/mix';
  .icon {
    &-arrow:before {
      content: '\e638';
    }
    &-arrow-l:before {
      content: '\e65f';
    }
    &-check:before {
      content: '\e62e';
      color: #10D789;
      font-size: 24px;
    }
    &-right:before {
      content: '\e622';
      color: #707070;
      font-size: 12px;
    }
    &-close:before {
      content: '\e604';
      color: #999;
      font-size: 20px;
    }
  }
  .ball-icon {
    position: fixed;
    right: 100px;
    bottom: 120px;
    width: 80px;
    height: 80px;
    z-index: 97;
    transform: rotate(0deg);
    &.open {
      animation: rotateOpen 0.3s linear forwards;
    }
    &.close {
      animation: rotateClose 0.3s linear forwards;
    }
    @keyframes rotateOpen{
      0% { 
        transform: rotate(0deg);
        transform-origin: 49px 0;
      }
      50% {
        transform: rotate(-45deg);
        transform-origin: 49px 0;
      }
      100% {
        transform: rotate(-90deg);
        transform-origin: 49px 0;
      }
    }
    @keyframes rotateClose{
      0% { 
        transform: rotate(-90deg);
        transform-origin: 49px 0;
      }
      50% {
        transform: rotate(-45deg);
        transform-origin: 49px 0;
      }
      100% {
        transform: rotate(0deg);
        transform-origin: 49px 0;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .message-box {
    box-sizing: border-box;
    position: fixed;
    left: 15px;
    bottom: 122px;
    height: 222px;
    width: 280px;
    z-index: 100;
    padding-top: 38px;
    .close-btn {
      position: absolute;
      width: 40px;
      height: 20px;
      top: 0px;
      right: 11px;
      color: #fff;
      font-size: 11px;
      border-radius: 10px;
      background: rgba(0,0,0,0.5);
    }
    ul {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        width: 280px;
        height: 40px;
        background: rgba(0,0,0,0.85);
        border-radius: 100px;
        padding: 6px 10px 6px 6px;
        margin-bottom: 8px;
        &:nth-last-child(1) {
          margin: 0;
        }
        .icon {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          overflow: hidden;
        }
        p {
          width: 180px;
          font-size: 11px;
          color: #FFDABE;
        }
        button {
          width:40px;
          height:20px;
          background:linear-gradient(90deg,rgba(255,163,38,1) 0%,rgba(255,98,39,1) 100%);
          border-radius: 10px;
          color: #fff;
        }
      }
    }
  }
  
  .fade-enter-active, .fade-leave-active {
    transition: all 0.3s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
  }
  
  @keyframes bounce-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
  }
</style>
